<template>
  <div class="form-config-container">
    <el-form label-position="top">
      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="PDA模式" required>
            <el-switch v-model="dataOptions.isPDA" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否" @change="isPdaChange">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="UI类型">
            <el-select v-model="data.dataOptions.vueType">
              <el-option value="pcUI"></el-option>
              <el-option value="app扫描UI"></el-option>
              <el-option value="bbc后台"></el-option>
              <el-option value="bbc门店"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="Model路径" required>
            <el-input v-model="dataOptions.folder"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="tableView" required>
            <el-input v-model="dataOptions.tableView"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="项目名称">
            <el-input v-model="dataOptions.projectName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="编辑开启tab分组">
            <el-switch v-model="dataOptions.openTabGroup" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="固定条件">
        <el-input v-model="currentFixedWhere" :rows="3" type="textarea"></el-input>
      </el-form-item>

      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="idField" required>
            <el-input v-model="dataOptions.idField"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自动编码字段">
            <el-input v-model="dataOptions.codeRegular"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="连接字段" required>
            <el-input v-model="dataOptions.linkColumn"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="menu_Id" required>
            <el-input v-model.number="dataOptions.menu_Id"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="3">
        <el-col :span="24">
          <el-form-item label="路由" required>
            <el-input v-model="dataOptions.router"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="3">
        <el-col :span="6">
          <el-form-item label="分页大小">
            <el-input v-model.number="dataOptions.pageSize"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="列表排序方式">
            <el-input v-model="orderBy"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="列表显示操作列">
            <el-switch v-model="dataOptions.showActionField" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="列表显示求和行">
            <el-switch v-model="dataOptions.showSumField" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <!--用户指定VueData_Id-->
      <!-- <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="orginVueData_Id">
            <el-input v-model="dataOptions.orginVueData_Id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row> -->

      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="行内表单">
            <el-switch v-model="dataOptions.formInline" :active-value="false" :inactive-value="true" active-text="单独行" inactive-text="行内">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="查询独立行">
            <el-switch v-model="dataOptions.searchOnlyLine" :active-value="true" :inactive-value="false">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="开启展开列">
            <el-switch v-model="dataOptions.openExpand" :active-value="true" :inactive-value="false" active-text="是" inactive-text="否">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>

      <el-form-item label="标签对齐方式">
        <el-radio-group v-model="editorConfig.labelPosition">
          <el-radio-button label="left">左对齐</el-radio-button>
          <el-radio-button label="right">右对齐</el-radio-button>
          <el-radio-button label="top">顶部对齐</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="表单字段宽度">
            <el-input-number v-model="labelWidth" :min="0" :max="200" :step="10" controls-position="right" style="width:80px;!important"></el-input-number> px
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表单宽度">
            <el-input-number v-model="formWidth" :min="0" :max="1000" :step="10" controls-position="right" style="width:80px;!important"></el-input-number> px
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="对话框宽度">
            <el-input v-model="editorConfig.width"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="对话框顶部距离">
            <el-input v-model="editorConfig.top"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="对话框标题">
            <el-input v-model="editorConfig.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="提交按钮名称">
            <el-input v-model="editorConfig.saveButtonText"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="3">
        <el-col :span="12">
          <el-form-item label="开启分组查询">
            <el-switch v-model="dataOptions.openGroupBy" :active-value="true" :inactive-value="false">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开启审核流">
            <el-switch v-model="dataOptions.openAuditFlow" :active-value="true" :inactive-value="false">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="编辑页面默认值(JSON对象)">
        <el-input v-model="currentEditorDefaultValue" :rows="3" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="数据执行脚本(dataList)">
        <el-input v-model="dataOptions.script" :rows="3" type="textarea"></el-input>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    editorConfig: {
      type: Object,
      default: () => {
        return {};
      }
    },
    dataOptions: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    labelWidth: {
      get: function () {
        return parseInt(this.editorConfig.labelWidth);
      },
      set: function (val) {
        this.editorConfig.labelWidth = val + "px";
      }
    },
    formWidth: {
      get: function () {
        return parseInt(this.editorConfig.formWidth);
      },
      set: function (val) {
        if (val) {
          this.editorConfig.formWidth = val + "px";
        } else {
          this.editorConfig.formWidth = null;
        }
      }
    },
    // 排序方式
    orderBy: {
      get: function () {
        return JSON.stringify(this.dataOptions.orderBy || this.dataOptions.sortName);
      },
      set: function (val) {
        try {
          if (!val) {
            this.$set(this.dataOptions, "orderBy", null);
            return;
          }
          const orderBy = JSON.parse(val);
          this.$set(this.dataOptions, "orderBy", orderBy);
          this.$message.success("列表排序方式格式正确");
        } catch (error) {
          this.$message.error("列表排序方式不是有效的JSON格式");
        }
      }
    },
    // fixedWhere JSON加载属性
    currentFixedWhere: {
      get: function () {
        var params = this.dataOptions.fixedWhere;
        if (params) {
          return JSON.stringify(params, 0, 2);
        } else {
          return "";
        }
      },
      set: function (val) {
        try {
          this.$set(this.dataOptions, "fixedWhere", JSON.parse(val));
          this.$message.success("json格式正确");
        } catch (error) {
          this.$message.error("数据结构不正确，不是有效的json格式，" + error.message);
        }
      }
    },
    // editorDefaultValue JSON加载属性
    currentEditorDefaultValue: {
      get: function () {
        var params = this.dataOptions.editorDefaultValue;
        if (params) {
          return JSON.stringify(params, 0, 2);
        } else {
          return "";
        }
      },
      set: function (val) {
        try {
          this.$set(this.dataOptions, "editorDefaultValue", JSON.parse(val));
          this.$message.success("json格式正确");
        } catch (error) {
          this.$message.error("数据结构不正确，不是有效的json格式，" + error.message);
        }
      }
    }
  },
  methods: {
    // 改变模式，清空列表页面字段
    isPdaChange () {
      this.data.dataListOptions.fields = [];
    }
  }
};
</script>

<style lang="scss" scoped>
.form-config-container {
  ::v-deep .el-input__inner {
    padding: 0 5px;
  }
  ::v-deep .el-input-number .el-input__inner {
    padding-left: 5px;
    padding-right: 40px;
  }
  ::v-deep .el-form-item {
    margin-bottom: 0px;
  }
}
</style>

